<template>
  <div :class="partFive">
    <h3 class="text-center text-top">工作经验</h3>
    <p>
      <a href="javascript:void(0)">上海创创文化传播有限公司</a>
      <span class="text-small">| 2017/12 - 至今</span>
    </p>
    <p class="text-small">项目成就：</p>
    <p class="text-small">&emsp;1. PC端 CRM系统的开发，已上线。</p>
    <p class="text-small">&emsp;2. 仪表盘可视化系统，可投放到大屏电视机上观看</p>
    <p class="text-small">&emsp;3. 官网 jQuery+HTML 官网的维护及 H5 页面。</p>
    <p class="text-small">&emsp;4. 结果识堂（VUE全家桶+VUX）移动端H5项目，微信公众号可以搜索。</p>
    <p class="text-small">&emsp;5. 小程序的开发（主要是销售人员可以自主创建订单，查看客户的记录及流程审批等）。</p>
  </div>
</template>

<script>
export default {
  name: "partFive",
  data() {
    return {
      partFive: "part-five",
      curWidth: 0
    };
  },
  beforeMount() {
    this.curWidth = document.documentElement.clientWidth || document.body.clientWidth;
    if(this.curWidth < 1600) {
      this.partFive = "part-five-responsive"
    }
  }
};
</script>

<style scoped>
a {
  color: deepskyblue;
}
a:hover {
  color: rgb(118, 190, 248);
}
.part-five {
  width: 100%;
  height: 310px;
  border: 40px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
.part-five-responsive {
  width: 100%;
  border: 40px solid transparent;
  border-image: url("~@/./assets/img/border_image.png") 30 30 stretch;
  background: #18202d;
}
.text-center {
  text-align: center;
}
.text-small {
  font-size: 0.9em;
  color: rgb(253, 239, 239);
}
</style>